<template>
    <el-dialog v-model="props.visible" title="设计师分单" align-center width="20%" @close="handleClose">
        <el-row :gutter="20" class="mb8">
            <el-col  :span="11">
                制单员：韩剑飞
            </el-col>
            <el-col :span="13">
                logo名称：CAKE(5人份)
            </el-col>
        </el-row>
        <el-row :gutter="20" class="mb20">
            <el-col  :span="11">
                制单日期：2024/3/13
            </el-col>
            <el-col :span="13">
                产品名称：C款不锈钢套装
            </el-col>
        </el-row>
        <el-form :model="form" ref="formRef" label-width="auto" label-position="top">
            <el-form-item label="选择分配设计师" prop="bomId">
                <el-select v-model="selectedBom" filterable clearable remote value-key="id"
                    :remote-method="handleSearching" :loading="bomListLoading" placeholder="请选择">
                    <el-option v-for="item in bomList" :key="item.id" :label="item.bomName" :value="item"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button type="primary" @click="handleSubmit">分 配</el-button>
                <el-button @click="handleClose">取 消</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { ProductOrderFormType } from '@/api/sj/productManagement/productOrder/types';
import { type FormInstance } from 'element-plus';
import { getCustomerApi } from '@/api/sj/customer-crm';
import { getBomByCustomerNameApi, addProductOrderApi } from '@/api/sj/productManagement/productOrder';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const props = defineProps(['visible', 'initList']);
const emits = defineEmits(['submit', 'close']);
const formRef = ref<FormInstance>();
const form = ref<any>({ ...props.initList });
const customerList = ref<any[]>([]);
const bomList = ref<any[]>([]);
const bomListLoading = ref(false);
const selectedBom = ref<any>({});

watch(() => props.visible, async (newValue) => {
    if (newValue) {
        const { rows } = await getCustomerApi({ pageNum: 1, pageSize: 999 });
        customerList.value = rows;
    };
}, { deep: true });


/** 远程搜索 */
const handleSearching = async (query: string) => {
    if (query) {
        bomListLoading.value = true;
        const { data } = await getBomByCustomerNameApi(query);
        bomList.value = data;
        bomListLoading.value = false;
    };
};

watch(() => selectedBom.value, (newData) => {
    form.value.bomId = newData.id;
}, { deep: true });

const handleSubmit = async () => {
    const { code } = await addProductOrderApi({ ...form.value });
    if (code == 200) {
        emits('submit', true);
        proxy?.$modal.msgSuccess('新增成功');
        handleClose();
    } else {
        emits('submit', false);
    };
};

const handleClose = () => {
    formRef.value?.resetFields();
    emits('close');
};
</script>

<style lang="scss" scoped>
.el-select {
    width: 100%;
}
</style>